<template>
	<view class="container">
		<view class="top-box">
			<view class="user-box">
				<image class="user-box" :src="data.userInfo.head || $defaultAvatar" mode="aspectFill"></image>
			</view>
			<view class="user-name">
				{{data.userInfo.mobile}}
			</view>
			<view class="user-name-tips">
				昵称：{{data.userInfo.nickname}}
			</view>

			<view class="user-bottom">
				<view class="box">
					<view class="num">
						{{data.teamlist.length}}
					</view>
					<view class="text">
						直推人数
					</view>
				</view>
				<view class="box">
					<view class="num">
						{{data.green}}
					</view>
					<view class="text">
						直推有效人数
					</view>
				</view>
				<view class="box">
					<view class="num">
						{{data.userInfo.team_number}}
					</view>
					<view class="text">
						粉丝人数
					</view>
				</view>
				<view class="box">
					<view class="num">
						{{data.userInfo.team_money}}
					</view>
					<view class="text">
						粉丝业绩
					</view>
				</view>
			</view>

		</view>
		<view class="">
			<view class="top-bor">
				<u-divider text="常用功能" ></u-divider>
			</view>
			<view class="bottom-box">
				<view class="left" @click="$goURl('/pages/personal/teams/member')">
					<view class="b-text">
						直推会员
					</view>
				</view>
				<view class="right" @click="$goURl('/pages/personal/share')">
					<view class="b-text">
						推广分享
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		code: true,
		teamlist:[],
		userInfo:{},
		info:{},
		green:0
	})
	onLoad((option) => {
		shopClassList()
		data.userInfo=uni.getStorageSync('userInfo')
	})
	onShow(() => {

	})
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		console.log('onReachBottom')
	})
	function shopClassList() {
		proxy.$request({
			url: `api/team/`,
			method: 'get',
			success(res) {
				data.teamlist=res.data.team_list
				data.info=res.data
				data.green = 0
				for (let item of data.teamlist) {
					if(item.green >0) {
						data.green++
					}
				}

			}
		})
	}

</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.container{
		padding: 30rpx;
	}
.top-box{

	background: linear-gradient( 159deg, #F5EBD9 0%, #EFDCBB 100%);
	border-radius: 20rpx;
	margin-bottom: 40rpx;
	padding: 44rpx 26rpx 36rpx 26rpx;
	.user-box{
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;

		margin: auto;
	}
	.user-name{
		font-weight: bold;
		font-size: 36rpx;
		color: #2D2D2D;
		text-align: center;
		margin-top: 20rpx;
	}
	.user-name-tips{
		font-weight: 400;
		font-size: 24rpx;
		color: #2D2D2D;
		text-align: center;
	}
	.user-bottom{
		display: flex;
		justify-content: space-between;
		margin-top: 55rpx;
		.box{
			text-align: center;
			.num{
				font-weight: 400;
				font-size: 36rpx;
				color: #2D2D2D;
			}
			.text{
				font-weight: 400;
				font-size: 24rpx;
				color: #2D2D2D;
				margin-top: 10rpx;
			}
		}
	}
}
.top-bor{
	width: 400rpx;
	margin: auto;
}
.bottom-box{
	display: flex;
	justify-content: space-between;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	.left{
		width: 336rpx;
		height: 128rpx;
		border-radius: 20rpx;
		background-image: url('https://pili-vod.guanxikeji.com/fubao/img/1755740751567.png');
		background-size: 100% 100%;
	}
	.right{
		width: 336rpx;
		height: 128rpx;
		border-radius: 20rpx;
		background-image: url('https://pili-vod.guanxikeji.com/fubao/img/1755740745331.png');
		background-size: 100% 100%;
	}
	.b-text{
		margin-top: 56rpx;
		margin-left: 20rpx;
	}
}
</style>
